<template>
  <div class="kyc-verification">
    <h2>KYC Verification</h2>
    <div class="kyc-passport" v-if="kycSet === 2">
      <span>Anteque Aq</span>
      <span>| {{someinfo.id_type}} |</span>
      <span>{{someinfo.id_num}}</span>
      <p>
        <i class="el-icon-circle-check"></i>Approved
      </p>
    </div>
    <p class="kyc-information">
      Please be noted that your information can not be changed after the verification. Please provide your complete and
      accurate information
    </p>
    <el-steps :active="currentSteps" align-center>
      <el-step title="Complete Information"></el-step>
      <el-step title="Upload Document"></el-step>
      <el-step title="Approval Verification"></el-step>
    </el-steps>
    <div class="complete-Information" v-if="currentSteps === 1">
      <el-form ref="completeForm" :model="completeForm" label-position="left" label-width="180px">
        <el-form-item label="Nationality">
          <el-select v-model="completeForm.nationality" placeholder="Choose your Nationality" @input="testAndVerify">
            <el-option-group v-for="group in country" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.label">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="ID Document Type">
          <el-select v-model="completeForm.id_type" placeholder="Choose your Nationality" @input="testAndVerify">
            <el-option v-for="item in idTypeList" :key="item.value" :label="item.label" :value="item.label">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="ID Document Number">
          <el-input v-model="completeForm.id_num" @input="testAndVerify" placeholder="Enter your ID Document Number"></el-input>
        </el-form-item>
        <el-form-item label="Full Name">
          <el-input v-model="completeForm.first_name" @input="testAndVerify" placeholder="Enter your Full Name"></el-input>
        </el-form-item>
        <el-form-item>
          <span class="enter-your">Please enter your real information as show on your document.</span>
        </el-form-item>
        <el-form-item>
          <el-button :type="primary" :disabled="disabled" @click="currentNext">NEXT</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="complete-Information" v-else-if="currentSteps === 2">
      <kycVerification @submit="submitNext" />
    </div>
    <div class="complete-more" v-else-if="currentSteps === 3">
      <div class="awaiting-audit" v-if="kycSet != 2">
        <span>
          <i class="el-icon-more"></i>
        </span>
        <p>Your document verification is in process. We will approve your application shortly.</p>
        <p>Thank you for your patient</p>
      </div>
      <div class="audit-pass" v-else>
        <span>
          <i class="el-icon-check"></i>
        </span>
        <p>Your document has been approved.</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { country } from "@/assets/js/country";
import { kycverification } from "@/api/kycAttest"
import kycVerification from "./components/idenVer.vue";
export default {
  data() {
    return {
      currentSteps: 1,
      kycSet: 0,
      completeForm: {
        nationality: "",
        id_type: "",
        id_num: "",
        first_name: ""
      },
      country: country, // 国家类型
      idTypeList: [ // 证件类型
        {
          value: 'IDcard',
          label: '身份证'
        }, {
          value: 'Passport',
          label: '护照'
        }, {
          value: 'Household Register',
          label: '户口本'
        }, {
          value: 'GAJMLW',
          label: '港澳居民来往内地通行证'
        }, {
          value: 'TWJMLW',
          label: '台湾居民来往大陆通行证'
        }, {
          value: 'tempo IDcard',
          label: '临时身份证'
        }, {
          value: 'other',
          label: '其他证件类型'
        }
      ],
      disabled: true,
      primary: 'info'
    };
  },
  components: {
    kycVerification
  },
  computed: {
    ...mapGetters({
      someinfo: "someinfo",
    })
  },
  created() {
    this.$nextTick(() => {
       this.kycSet = this.$route.query.kycSet
      switch(this.kycSet) {
        case 0:
          this.currentSteps = 2
          break;
        case 1:
          this.currentSteps = 1
          break;
        case 2:
          this.currentSteps = 3
          break;
        case 3:
          this.currentSteps = 3
          break;
       default:
          this.currentSteps = 1
        }
    })
  },
  methods: {
    submitNext() {
      this.currentSteps = 3;
    },
    /**
     * [currentNext description]
     * KYC 认证
     * --------------------------
     * @Author   LLP
     * @DateTime 2019-12-23T17:52:07+0800
     * @return   {[type]}                 [description]
     */
    async currentNext() {
      let param = {
        ...this.completeForm
      }
      let { data } = await kycverification(param)
      if (data === null) {
        this.currentSteps = 2;
      } 
    },
    /**
     * @name: 按钮是否可操作
     * --------------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */ 
    testAndVerify() {
      let from = this.completeForm
      if (from.nationality !="" && (from.id_type !="" && (from.id_num !="" && from.first_name !=""))) {
        this.disabled = false
        this.primary = 'primary'
      } else {
        this.disabled = true
        this.primary = 'info'
      }
    }
  }
};
</script>
<style lang="less" scoped>
.kyc-verification {
  h2 {
    font-size: 26px;
    display: inline-block;
  }
  .kyc-passport {
    font-size: 16px;
    margin-left: 50px;
    display: inline-block;
    p {
      color: #70c075;
      margin-left: 10px;
      display: inline-block;
    }
    span {
      padding: 0 2px;  
    }
  }
  .kyc-information {
    font-size: 15px;
    padding-top: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #edf0f4;
  }
  .el-steps {
    padding: 30px 30px;
    width: 620px;
    margin: 0 auto;
  }
  .complete-Information {
    width: 560px;
    margin: 0 auto;
    .el-form-item {
      span {
        color: #d9c3b2;
        font-size: 12px;
      }
      .el-button {
        width: 100%;
      }
    }
  }
  .complete-more {
    padding-top: 50px;
    text-align: center;
    span {
      width: 100px;
      color: #faad48;
      height: 100px;
      display: inline-block;
      border-radius: 50%;
      background: #f3e7d8;
      font-size: 50px;
      line-height: 100px;
      margin-bottom: 30px;
    }
    p {
      font-size: 18px;
      line-height: 30px;
    }
    .audit-pass {
      span {
        color: #70c075;
        background: #d9ebe0;
      }
    }
  }
}
</style>
<style lang="less">
.kyc-verification {
  .el-step__title {
    font-size: 12px;
  }
}
</style>